<template>
  <el-dialog
    :title="dialogTitle"
    v-model="dialogVisible"
    width="600px"
    :before-close="handleClose"
  >
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="120px"
    >
      <el-form-item label="活动名称" prop="discountName">
        <el-input v-model="formData.discountName" placeholder="请输入活动名称" />
      </el-form-item>
      
      <el-form-item label="活动时间" required>
        <el-date-picker
          v-model="activityTime"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          value-format="YYYY-MM-DD HH:mm:ss"
        />
      </el-form-item>
      
      <el-form-item label="活动介绍" prop="remark">
        <el-input 
          v-model="formData.remark" 
          type="textarea" 
          placeholder="请输入活动介绍"
          :rows="3"
        />
      </el-form-item>
      
      <el-form-item label="活动保证金" prop="ifBond">
        <el-radio-group v-model="formData.ifBond">
          <el-radio :label="0">不需要</el-radio>
          <el-radio :label="1">需要</el-radio>
        </el-radio-group>
      </el-form-item>
      
      <el-form-item 
        v-if="formData.ifBond === 1" 
        label="保证金金额" 
        prop="bondMoney"
      >
        <el-input 
          v-model="formData.bondMoney" 
          placeholder="请输入保证金金额"
          type="number"
        >
          <template #append>元</template>
        </el-input>
      </el-form-item>
      
      <el-form-item label="优惠方式" prop="discountMode">
        <el-radio-group v-model="formData.discountMode">
          <el-radio :label="1">折扣</el-radio>
          <el-radio :label="2">直降</el-radio>
        </el-radio-group>
      </el-form-item>
      
      <el-form-item label="优惠方案" prop="discountProgramme">
        <el-radio-group v-model="formData.discountProgramme">
          <el-radio :label="1">单商品优惠</el-radio>
          <el-radio :label="2">多商品优惠</el-radio>
        </el-radio-group>
      </el-form-item>
      
      <el-form-item label="折扣设置" required>
        <el-input 
          v-model="formData.discount" 
          placeholder="请输入折扣值"
          type="number"
        >
          <template #append v-if="formData.discountMode === 1">折</template>
          <template #append v-else>元</template>
        </el-input>
      </el-form-item>
      
      <el-form-item label="限购设置" prop="ifLimit">
        <el-radio-group v-model="formData.ifLimit">
          <el-radio :label="1">限购</el-radio>
          <el-radio :label="2">不限购</el-radio>
        </el-radio-group>
      </el-form-item>
      
      <el-form-item 
        v-if="formData.ifLimit === 1" 
        label="限购数量" 
        prop="limitNumber"
      >
        <el-input 
          v-model="formData.limitNumber" 
          placeholder="请输入限购数量"
          type="number"
        />
      </el-form-item>
    </el-form>
    
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, computed, reactive, defineExpose, watch } from 'vue'
import { ElMessage } from 'element-plus'
import type { FormInstance } from 'element-plus'

interface FormData {
  discountName: string
  remark: string
  ifBond: number
  bondMoney: string
  discountMode: number
  discountProgramme: number
  discount: number | null
  ifLimit: number
  limitNumber: number
}

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update:modelValue', 'success'])

const dialogVisible = ref(false)

// 监听modelValue变化
watch(() => props.modelValue, (val) => {
  dialogVisible.value = val
}, { immediate: true })
const dialogTitle = ref('')
const isEdit = ref(false)
const formRef = ref<FormInstance>()

// 活动时间
const activityTime = ref<[string, string]>(['', ''])

// 表单数据
const formData = reactive<FormData>({
  discountName: '',
  remark: '',
  ifBond: 0,
  bondMoney: '',
  discountMode: 1,
  discountProgramme: 1,
  discount: null,
  ifLimit: 2,
  limitNumber: 0
})

// 表单验证规则
const formRules = {
  discountName: [
    { required: true, message: '请输入活动名称', trigger: 'blur' }
  ],
  remark: [
    { required: true, message: '请输入活动介绍', trigger: 'blur' }
  ],
  bondMoney: [
    { required: true, message: '请输入保证金金额', trigger: 'blur' }
  ],
  discount: [
    { required: true, message: '请输入折扣值', trigger: 'blur' }
  ],
  limitNumber: [
    { required: true, message: '请输入限购数量', trigger: 'blur' }
  ]
}

// 打开弹窗
const open = (row?: any) => {
  dialogVisible.value = true
  if (row) {
    // 编辑模式
    isEdit.value = true
    dialogTitle.value = '编辑折扣活动'
    // 这里应该从row中获取数据并填充表单
    formData.discountName = row.discountName || ''
    formData.remark = row.remark || ''
    formData.ifBond = row.ifBond || 0
    formData.bondMoney = row.bondMoney || ''
    formData.discountMode = row.discountMode || 1
    formData.discountProgramme = row.discountProgramme || 1
    formData.discount = row.discount || null
    formData.ifLimit = row.ifLimit || 2
    formData.limitNumber = row.limitNumber || 0
    // 设置活动时间
    if (row.startTime && row.endTime) {
      activityTime.value = [row.startTime, row.endTime]
    }
  } else {
    // 新增模式
    isEdit.value = false
    dialogTitle.value = '新增折扣活动'
    // 重置表单
    resetForm()
  }
}

// 重置表单
const resetForm = () => {
  formRef.value?.resetFields()
  activityTime.value = ['', '']
  formData.discountName = ''
  formData.remark = ''
  formData.ifBond = 0
  formData.bondMoney = ''
  formData.discountMode = 1
  formData.discountProgramme = 1
  formData.discount = null
  formData.ifLimit = 2
  formData.limitNumber = 0
}

// 关闭弹窗
const handleClose = () => {
  dialogVisible.value = false
  emit('update:modelValue', false)
  resetForm()
}

// 提交表单
const handleSubmit = async () => {
  if (!formRef.value) return
  
  await formRef.value.validate((valid) => {
    if (valid) {
      // 验证活动时间
      if (!activityTime.value[0] || !activityTime.value[1]) {
        ElMessage.error('请选择活动时间')
        return
      }
      
      // 构造提交数据
      const submitData = {
        ...formData,
        startTime: activityTime.value[0],
        endTime: activityTime.value[1]
      }
      
      // 这里应该调用API提交数据
      console.log('提交数据:', submitData)
      ElMessage.success(`${isEdit.value ? '编辑' : '新增'}折扣活动成功`)
      handleClose()
    }
  })
}

defineExpose({ open })
</script>

<style scoped lang="scss">
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  padding: 0 20px 20px 0;
}
</style>